import {
  Button,
  Drawer,
  Icon,
  ImgDefault,
  Popover,
  Space,
  Tag
} from "@bytedance/mona-ui"
import React, { useRef, useState } from "react"

import "./titpoi.scss"
import "@Styles/funcTabs.scss"

import { Agreement } from "@Utils/addConfigFuncs"

import { useAppDispatch, useAppSelector } from "~store"
import * as func from "~store/controller/funcTabs"

import Coupon from "./componets/coupon"
import Ltalp from "./componets/ltalp"
import NewPerson from "./componets/newPerson"

const ossurl = process.env.PLASMO_PUBLIC_CN_OSS
export default function FuncTabs() {
  const tablist = useAppSelector((state) => state.funcTabs.tablist)
  const dispatch = useAppDispatch()
  type ChildMethods = {
    // 子组件暴露给父组件的方法
    someMethod: () => void
  }
  const childRef = useRef<ChildMethods>(null)
  const chidActRef = useRef<ChildMethods>(null)
  // const childRef2 = useRef<ChildMethods>(null);
  const [footerStatus, setFooterStatus] = useState(true)

  return (
    <div className="contentbox">
      <div
        className="iconsvg"
        onClick={() => {
          open("https://doulingyang.cn")
        }}>
        <img
          src={ossurl + "webimages/logo192.png"}
          alt=""
          className="logIcon"
        />
        {/* <Icon type="CollectionIcon"/> */}
      </div>

      {tablist.map((item, index) => {
        return (
          <div key={index}>
            <Popover
              visible={item.showPopoverStatus || false}
              placement="bottom"
              content={
                <Space direction="vertical">
                  <div>
                    抖羚羊新增
                    <Tag bordered type="success">
                      {item.title}
                    </Tag>
                    功能,点击立即体验{" "}
                  </div>
                  <div
                    className="moter"
                    style={{
                      width: "100%",
                      display: "flex",
                      justifyContent: "flex-end"
                    }}>
                    <Button
                      size="mini"
                      type="primary"
                      onClick={() => {
                        item.showPopoverStatus = false
                        dispatch(func["setInfoData"]())
                      }}>
                      知道了
                    </Button>
                  </div>
                </Space>
              }>
              <Popover
                content={
                  <Space direction="vertical" align="center">
                    <div>邀约达人已升级，请联系客服领取使用教程</div>
                    <ImgDefault
                      mask={false}
                      borderRadius={8}
                      style={{ width: 120, height: 120, margin: "0 auto 10px" }}
                      // src={goodPrettify.pic}
                      imgSrc={
                        ossurl +
                        "webimages/code/WechatIMG6.jpg?time=" +
                        new Date().getTime()
                      }></ImgDefault>
                  </Space>
                }
                placement="bottom"
                // title="邀约达人已升级，请联系客服领取使用教程"
                trigger={
                  item.funcksy == "yaoyueDaren" ? "hover" : "contextMenu"
                }>
                <div
                  className="tabitem"
                  onClick={() => {
                    if (item.funcksy == "yaoyueDaren") {
                      return
                    }
                    Agreement().then(() => {
                      dispatch(func[item.funcksy](index))
                    })
                  }}>
                  <Button
                    type={item.active ? "primary" : "default"}
                    size="mini">
                    {" "}
                    <Icon type={item.icon} />
                    {item.title}
                  </Button>
                </div>
              </Popover>
            </Popover>
            <Drawer
              visible={item.active}
              size="super"
              title={item.drawerTtile || "抖羚羊"}
              width={item.width || 966}
              footer={
                <>
                  {footerStatus ? (
                    <div
                      className="addfooter"
                      style={{
                        display: "flex",
                        justifyContent: "flex-end"
                      }}>
                      <Space>
                        <Button
                          type="primary"
                          onClick={(e) => {
                            if (item.funcksy == "coupon" && childRef.current) {
                              childRef.current?.someMethod()
                            }
                            if (
                              item.funcksy === "LtaLp" &&
                              chidActRef.current
                            ) {
                              chidActRef.current?.someMethod()
                            }
                          }}>
                          确认
                        </Button>
                        <Button onClick={() => dispatch(func.clearbox(index))}>
                          取消
                        </Button>
                      </Space>
                    </div>
                  ) : null}
                </>
              }
              // onOk={(e) => {

              // }}
              // //   footer="null"
              onCancel={() => dispatch(func.clearbox(index))}
              bodyStyle={{
                padding: "0 24px"
              }}>
              {item.funcksy === "coupon" && (
                <Coupon
                  ref={childRef}
                  clearBox={() => dispatch(func.clearbox(index))}
                  setFooterStatus={setFooterStatus}
                  actstr={item.actstr || "addCoupon"}
                />
              )}
              {item.funcksy === "newPerson" && <NewPerson />}
              {item.funcksy === "LtaLp" && (
                <Ltalp
                  ref={chidActRef}
                  clearBox={() => dispatch(func.clearbox(index))}
                  setFooterStatus={setFooterStatus}
                  actstr={item.actstr || "addCoupon"}
                />
              )}
            </Drawer>
          </div>
        )
      })}
    </div>
  )
}
